<template>
  <div class="banner-box">
    <el-carousel :interval="3000" indicator-position="inside">
      <el-carousel-item class="item1">
        <div class="banner1-text1">
          <p>
            <span>{{ "新鲜面包燕麦碎" }}</span>
          </p>
        </div>
        <div class="banner1-text2">
          <p>
            <span>{{ "我们新鲜的越南蔬菜卷看起来不错，味道更好。" }}</span>
          </p>
        </div>
        <div class="btn1">
          <button class="btn">立即 行动</button>
        </div>
      </el-carousel-item>
      <el-carousel-item class="item2">
        <div class="banner2-text1">
          <p>
            <span>{{ "最好的健康新鲜" }}</span>
          </p>
        </div>
        <div class="banner2-text2">
          <p>
            <span>{{ "我们新鲜的越南蔬菜卷看起来不错，味道更好。" }}</span>
          </p>
        </div>
        <div class="btn2">
          <button class="btn">立即 行动</button>
        </div>
      </el-carousel-item>
      <el-carousel-item class="item3">
        <div class="banner3-text1">
          <p>
            <span>{{ "选择健康的生活方式" }}</span>
          </p>
        </div>
        <div class="banner3-text2">
          <p>
            <span>{{ "我们新鲜的越南蔬菜卷看起来不错，味道更好。" }}</span>
          </p>
        </div>
        <div class="btn3">
          <button class="btn">立即 购买</button>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
@import "./index.scss";
</style>
